<!-- 首页组件 -->
<template>
  <section class="msite">
    <!--首页头部-->
    <HeadTop :title="address.name">
      <span class="header_search" slot="left">
        <i class="iconfont icon-sousuo"></i>
      </span>
      <router-link class="header_login" slot="right" :to="userInfo._id ? '/userinfo': '/login'">
        <span class="header_login_text" v-if="!userInfo._id">
          登录|注册
        </span>
        <span class="header_login_text" v-else>
           <i class="iconfont icon-person"></i>
        </span>
      </router-link>
    </HeadTop>
    <!--首页导航-->
    <nav class="msite_nav">
      <div class="swiper-container" v-if="categorys.length"> <!--   -->
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(categorys , index) in categorysArr" :key="index">
            <a href="javascript:" class="link_to_food" v-for="(category, index) in categorys"
              :key="index">
              <div class="food_container">
                <img :src="baseImageUrl + category.image_url">
              </div>
              <span>{{category.title}}</span>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <img src="./images/msite_back.svg" alt="back" v-else> <!--  -->
    </nav>  
    <!--首页附近商家-->
    <div class="msite_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-xuanxiang"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <ShopList></ShopList>
    </div>
  </section>

</template>

<script>
// 引入要使用的组件
import HeadTop from '@/components/HeadTop/HeadTop'
import ShopList from '@/components/ShopList/ShopList'
import { mapState } from 'vuex'

// 引入 swiper
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'

import ajax from '@/api/ajax'

export default {
    data() {
        return {
            baseImageUrl: 'https://fuss10.elemecdn.com',
        }
    },

    components: {
        HeadTop,
        ShopList,
    },

    computed: {
        ...mapState(['address', 'categorys' , 'userInfo']),
        // 生成当前的二维数组, 用来给当前的循环进行使用
        categorysArr() {
            // 先获取到现在的 category 数组
            let categorys = this.categorys
            // 定义外部数组
            let arr = []
            let tempArr
            for (let i = 0; i < categorys.length; i++) {
                // 计算当前的索引下标
                if (i % 8 === 0) {
                    // 创建一个新数组
                    tempArr = []
                    arr.push(tempArr)
                }
                tempArr.push(categorys[i])
            }
            console.log(arr)
            return arr
        },
    },

    async mounted() {
        this.$store.dispatch('getCategorys')
        this.$store.dispatch('getShops')
        // 调用方法进行测试
        // 这里产生了跨域问题 , 这个问题的解决方式有两种, 1 后端允许跨域设置  2 前端进行配置, 欺骗浏览器, 以达到跨域的目标
        // 这里方法调用完成, 之后可以进行下一步了
        // const pre = await ajax("/api/position/40.10038,116.36867")
        // console.log(pre.data);
    },

    methods: {
    },
    watch: {
        // 当前的值进行改变的时候, 刷新界面之后, 再进行 swiper 的创建
        categorys(newVal) {
          this.$nextTick(() => {
              var mySwiper = new Swiper('.swiper-container', {
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
          })
        },
    },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.msite { // 首页
  width: 100%;

  .header {
    background-color: #02a774;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;

    .header_search {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 10%;
      height: 50%;

      .icon-sousuo {
        font-size: 25px;
        color: #fff;
      }
    }

    .header_title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50%;
      color: #fff;
      text-align: center;

      .header_title_text {
        font-size: 20px;
        color: #fff;
        display: block;
      }
    }

    .header_login {
      font-size: 14px;
      color: #fff;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);

      .header_login_text {
        color: #fff;
      }
    }
  }

  .msite_nav {
    bottom-border-1px(#e4e4e4);
    margin-top: 45px;
    height: 200px;
    background: #fff;

    .swiper-container {
      width: 100%;
      height: 100%;

      .swiper-wrapper {
        width: 100%;
        height: 100%;

        .swiper-slide {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-wrap: wrap;

          .link_to_food {
            width: 25%;

            .food_container {
              display: block;
              width: 100%;
              text-align: center;
              padding-bottom: 10px;
              font-size: 0;

              img {
                display: inline-block;
                width: 50px;
                height: 50px;
              }
            }

            span {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 13px;
              color: #666;
            }
          }
        }
      }

      .swiper-pagination {
        >span.swiper-pagination-bullet-active {
          background: #02a774;
        }
      }
    }
  }

  .msite_shop_list {
    top-border-1px(#e4e4e4);
    margin-top: 10px;
    background: #fff;

    .shop_header {
      padding: 10px 10px 0;

      .shop_icon {
        margin-left: 5px;
        color: #999;
      }

      .shop_header_title {
        color: #999;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>